<template>
	<view>
		<view class="header_fixed" :style="{'color':color}">
			<view class="header_h flex-ac-jc">
				<view class="head_left" @tap="goBack">
					<text class="gui-icons icon" v-if="pages>1">&#xe643;</text>
				</view>
				<text class="head_title flex-ac f32 gui-bold qoverDot flex1 gui-text-center">{{title}}</text>
				<view class="head_right flex-ac-je" @tap="rigthIconClick">
					<image v-if="isRightImg" :src="isRightImg" mode="widthFix" :style="{'width':isRightImgSize}"></image>
					<view class="gui-badge-pointNum cfff f26 gui-bold" v-if="applyListLength"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name  : "gui-a-header",
		props : {
			title: String,
			isShowPlace: {
				type: Boolean,
				default: true
			},
			bg: {
				type: String,
				// default: 'linear-gradient(139deg, #3BB7FF 0%, #F406FE 100%)'
				default: '#ffffff'
			},
			color: {
				type: String,
				default: '#333'
			},
			isRightImg: {
				type: String,
				default: ''
			},
			isRightImgSize: {
				type: String,
				default: '30rpx'
			},
			isRightIcon: {
				type: String,
				default: ''
			},
			isRightIconSize: {
				type: String,
				default: '28rpx'
			},
			applyListLength: {
				type: Number,
				default: 0
			},
		},
		data() {
			return{
				pages:getCurrentPages().length
			}
		},
		methods:{
			goBack(){
				uni.navigateBack()
			},
			rigthIconClick(){
				this.$emit('rigthIconClick',true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gui-badge-pointNum {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		right: 10rpx;
		top: -5rpx;
		border-radius: 18rpx;
		z-index: 1;
		background-color: #F95657;
	}
	.header_fixed{
		height: 100%;
	}
	.header_h {
		padding: 0 20rpx;

		.head_left {
			width: 160rpx;
		}
 
		.head_title {
			margin: 0 20rpx;
			box-sizing: border-box;
		}

		.head_right {
			position: relative;
			width: 160rpx;
			box-sizing: border-box;
			padding-right: 20rpx;
		}
	}
</style>